<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>

    <script src="js/echarts.common.min.js"></script>
    <script src="js/rem.js"></script>
<link rel="stylesheet" href="css/index.css"></link>
</head>
<body>
<div class="warp">
    <div class="header" style="color:#FFF;">
        <div class="header-left">2018-10-15 17:04:07 星期三</div>
        <div class="header-right"><img
                style="border-radius:50%;width: 0.15rem;vertical-align: middle;margin-right: 0.03rem"
                src="images/icon.jpg" alt=""><span class="nickName">随便叫啥</span><a href="javascript:void(0)" id="js-cancelFullScreen" style="display: none"><span class="iconfont" style="font-size: 0.05rem">&#xe79d;</span  >退出</a>
            <a href="javascript:void(0)" id="js-fullScreen"><span class="iconfont" style="font-size: 0.05rem">&#xe61f;</span>全屏</a></div>
    </div>
    <div class="body">
        <div class="body-ambo">
            <div class="body-ambo-s">
                <div class="visitor">
                    <span>当日厂内访客</span>
                    <p>766999</p>
                </div>
                <div class="visitor-staff">
                    <div style="color: #f98c20;">
                        <p style="color:#FFF;" >当前总入厂访客</p>
                        <span style="font-family: MyFont">766999</span>
                    </div>
                    <div>
                        <p style="color:#FFF">当前厂内员工</p>
                        <span style="font-family: MyFont"> 13486</span>
                    </div>
                </div>
            </div>
            <div class="body-ambo-b">
                <div class="rectangle" style="position:absolute;top: 6%;left: 15%;font-size: 0.065rem;color: rgb(178, 221, 248);">
                    动态出入厂人员
                </div>
                <ul class="in-out">
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="out">出厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p style="vertical-align: middle;">张三<span class="in">入厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="in">入厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="body-center" style="font-size: 0.09rem">
            <a href="javascript:void(0)" id="full">全屏</a><a href="javascript:void(0)" id="colseFull">退出</a>
            <!-- <i class="icon iconfont car">&#xe601;</i>
             <i class="icon iconfont people">&#xe600;</i>-->
            <i class='icon iconfont' style='visibility:hidden'>&#xe601;</i>
        </div>
        <div class="body-ambo">
            <div class="body-ambo-b" style="height:57%;">
                <div class="rectangle" style="position:absolute;top: 7%;left: 9%;font-size: 0.065rem;color: rgb(178, 221, 248);">
                    车辆统计
                </div>
                <div class="iconfont" style="position:absolute;top: 23%;left: 5%;font-size: 0.15rem;color: rgb(32, 233, 255)">&#xe659;<!--&#xe615;--></div>
                <div class="body-r-top-text" style="font-size: 0.05rem;top:20%;">
                    当前厂内物流车辆
                </div>
                <div class="body-r-top" style="font-family: 'MyFont';">
                    408
                </div>
                <div class="iconfont" style="position:absolute;top: 46%;left: 5%;font-size: 0.15rem; color: rgb(32, 233, 255) ">&#xe615;</div>
                <div class="body-r-top-text" style="font-size: 0.05rem;top: 43%;">
                    当日总入厂物流车辆
                </div>
                <div class="body-r-center" style="font-family: 'MyFont';">
                    1356
                </div>
                <div class="body-r-bottom">
                    <div class='body-r-bottom-content'>
                        <p style="color:#f46376"> 当日总入厂车辆</p>
                        <span>400</span>
                    </div>
                    <div class='body-r-bottom-content'><p style="color:#f98c20"> 当前厂内车辆</p>
                        <span>980</span></div>
                    <div class='body-r-bottom-content'><p style="color:#03cc86"> 当日违章车辆</p>
                        <span>32</span></div>
                </div>
            </div>
            <div class="body-ambo-s">
                <div class="rectangle" style="position:absolute;top: 9%;left: 9%;font-size: 0.065rem;color: rgb(178, 221, 248);">
                    动态出入厂车辆
                </div>
                <ul class="in-out-car">
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="out">出厂</span></p>
                            <p>2018-10-15 17: 04 : 07<span class="cut-off-rule" ></span>黄牌</p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p style="vertical-align: middle;">张三<span class="in">入厂</span></p>
                            <p>2018-10-15 17: 04 : 07 <span class="cut-off-rule"></span> 绿牌</p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="footer">

        <div id="main" class="footer-child">

        </div>
        <div class="timer t1">
            <a class="H focus-a"  href="javascript:void(0)">24小时</a>
            <a class="D" href="javascript:void(0)">日</a>
            <a class="M" href="javascript:void(0)">月</a>
        </div>
        <div id="main2" class="footer-child"></div>
        <div class="timer t2">
            <a class="H focus-a" href="javascript:void(0)">24小时</a>
            <a class="D" href="javascript:void(0)">日</a>
            <a class="M" href="javascript:void(0)">月</a>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    var car = [
        {type: 1, name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 0, y: 0, deg: 270},
        {type: 2, name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 0, y: 300, deg: 20},
        {type: 3, name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 100, y: 200, deg: 45}
        , {type: 4, name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 200, y: 92, deg: 45}]
    $(function () {
        var cordonW = 0
        var cordonH = 0
        var html = ""

        cordonW = $(".icon").width() * 2.38
        cordonH = $(".icon").height() * 2.23
        for (var i = 0; i < car.length; i++) {
            if (car[i].type == 1) {
                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='transform:rotate(${car[i].deg}deg);color:#f67b9b '>&#xe601;</i>
<div class="car-base info-cars-r-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`
            } else if (car[i].type == 2) {


                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='color:#f67b9b '>&#xe600;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`

            } else if (car[i].type == 3) {
                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='color:#a1ca45 '>&#xe600;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`

            } else if (car[i].type == 4) {

                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='transform:rotate(${car[i].deg}deg);color:#a1ca45 '>&#xe601;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`
            }
        }
        $('.body-center').append(html)
        $('#full').click(function () {
            $(this).parent().addClass('fullClass')
            $('#colseFull').show()
            $(this).hide()
        })
        $('#colseFull').click(function () {
            $(this).parent().removeClass('fullClass')
            $('#full').show()
            $(this).hide()
        })

        $('.body-center').on('mousemove', ".carWarp", function (e) {
            var mouseX = e.clientX || e.pageX
            var mouseY = e.clientY || e.pageY
            console.log(mouseX, mouseY)
            var warp_W = $('.body-center').width()
            var warp_H = $('.body-center').height()

            var warp_offy = $('.body-center').offset().top
            var warp_offx = $('.body-center').offset().left

            var X = mouseX - warp_offx
            var Y = mouseY - warp_offy
            /* cordonW= $(this).width()*4.38
             cordonH=$(this).height()*2.23*/
            //x<cordonW
            if (X < cordonW) {
                if (Y < cordonH) {  //左上角
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-t info-cars-l-b info-cars-r-t").addClass('info-cars-r-b')

                } else if (Y > warp_H - cordonH) {   //左下角
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-t info-cars-l-b info-cars-r-t info-cars-r-b").addClass('info-cars-r-t')
                } else if (Y > cordonH && Y < warp_H - cordonH) {  //左中
                    $(this).children('div').removeClass("info-cars-t info-cars-b  info-cars-l info-cars-l-t info-cars-l-b info-cars-r-t info-cars-r-b").addClass('info-cars-r')
                }
            } else if (X > warp_W - cordonW) {
                if (Y < cordonH) {   //右上角
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-t info-cars-r-b info-cars-r-t").addClass('info-cars-l-b')
                } else if (Y > warp_H - cordonH) {  //右下角
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-l-t')
                } else if (Y > cordonH && Y < warp_H - cordonH) {  //右中
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-l')
                }
            } else if (X < warp_W - cordonW && X > cordonW) {
                if (Y < cordonH) {   //上中
                    $(this).children('div').removeClass("info-cars-t info-cars-l info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-b')
                } else if (Y > warp_H - cordonH) {  //下中
                    $(this).children('div').removeClass("info-cars-b info-cars-l info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-t')
                } else if (Y > cordonH && Y < warp_H - cordonH) {  //中中
                    $(this).children('div').removeClass("info-cars-b info-cars-l info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-t')
                }
            }

        })

        $('#js-fullScreen').click(function () {
            $('#js-cancelFullScreen').show()
            $(this).hide()
        })
        $('#js-cancelFullScreen').click(function () {
            $('#js-fullScreen').show()
            $(this).hide()
        })
        $(".timer>a").click(function () {
            $(this).addClass('focus-a').siblings().removeClass('focus-a')
        })
    })
    var $fullScreen = document.getElementById("js-fullScreen");//按钮
    if ($fullScreen) {
        $fullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }
    var $cancelFullScreen = document.getElementById("js-cancelFullScreen");
    if ($cancelFullScreen) {
        $cancelFullScreen.addEventListener("click", function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }, false);
    }
</script>

<script>
    var myChart = echarts.init(document.getElementById('main'))
    var option = {
        title: {
            text: '厂内人员统计图',
            textStyle: {
                color: '#FFF',
                fontWeight: "normal",
                fontFamily: "Microsoft YaHei",
                fontSize:"16"
            },
            left: "center",
            top:'2%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            itemWidth: 14, // 设置宽度
            //itemGap: 40, // 设置间距
            itemHeight: 7, // 设置高度
            textStyle: {
                color: '#ffF'
            },
            left: '5%', //修改位置 left reight center 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left','center', 'right'。
            //如果 left 的值为'left', 'center','right'，组件会根据相应的位置自动对齐。
            top: "5%",
            data: ['入厂', '出厂']
        },
        grid: {
            left: '4%',
            right: '5%',
            bottom: '10%',
            top: '20%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            axisTick: {
                show: false
            },
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05', "14:10"]
        },
            {
                axisPointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#0E2A43'
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                offset: 20
            }],
        dataZoom: [{
                xAxisIndex: 0   ,   // 表示这个 dataZoom 组件控制 第四个 xAxis
                type:'inside',  //滚轮缩放
            }],
        yAxis: [{
            type: 'value',
            name: '单位1',
            gridIndex: 0,
            axisTick: {
                show: false
            },  //去掉坐标轴
            splitNumber: 6, //y轴 显示刻度个数   均分段数
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['transparent', 'rgba(250,250,250,0.05)']
                }
            }
        }],

        series: [{
            name: '出厂',
            type: 'line',
            smooth: true,
            stack: '总量1',
            symbol: 'circle',
            symbolSize: 5,  //更改圆点大小
            showSymbol: false,
            animationDelay: 1000,
            animationDuration: 1000,
            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(41,170,227,0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(41,170,227,0.0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: '#29aae3',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 15

                }
            },
            data: [220, 182, 191, 134, 250, 120, 110, 125, 145, 122, 165, 122]
        }, {
            name: '入厂',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            stack: '总量2',
            symbolSize: 5,
            animationDelay: 1000,
            animationDuration: 1000,
            showSymbol: false,
            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,127,0, 0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(255,127,0, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(255,127,0)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 282, 191, 134, 100]
        },]
    };

    myChart.setOption(option);
    var myChart2 = echarts.init(document.getElementById('main2'))
    var option2 = {
        title: {
            text: '厂内车辆统计图',
            textStyle: {
                color: '#FFF',
                fontSize: 16,
                fontWeight: "normal",
                fontFamily: "Microsoft YaHei"
            },
            left: "center",
            top:"2%"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            itemWidth: 14, // 设置宽度
            //itemGap: 40, // 设置间距
            itemHeight: 7, // 设置高度
            textStyle: {
                color: '#ffF'
            },
            left: '5%', //修改位置 left reight center 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left','center', 'right'。
            //如果 left 的值为'left', 'center','right'，组件会根据相应的位置自动对齐。
            top: "5%",
            data: ['入厂', '出厂']
        },
        grid: {
            left: '4%',
            right: '5%',
            bottom: '10%',
            top: '20%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            axisTick: {
                show: false
            },
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05', "14:10"]
        },
            {
                axisPointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#0E2A43'
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                offset: 20
            }],
        dataZoom: [{
                xAxisIndex: 0  ,    // 表示这个 dataZoom 组件控制 第四个 xAxis
                type:'inside',  //滚轮缩放
            }],
        yAxis: [{
            type: 'value',
            name: '单位1',
            gridIndex: 0,
            axisTick: {
                show: false
            },  //去掉坐标轴
            splitNumber: 6, //y轴 显示刻度个数   均分段数
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },

            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['transparent', 'rgba(250,250,250,0.05)']
                }
            }
        }],

        series: [{
            name: '出厂',
            type: 'line',
            smooth: true,
            stack: '总量1',
            symbol: 'circle',
            symbolSize: 5,  //更改圆点大小
            showSymbol: false,
            animationDelay: 1000,
            animationDuration: 1000,

            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(41,170,227,0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(41,170,227,0.0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: '#29aae3',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 15

                }
            },
            data: [220, 182, 191, 134, 250, 120, 110, 125, 145, 122, 165, 122]
        }, {
            name: '入厂',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            stack: '总量2',
            symbolSize: 5,
            animationDelay: 1000,
            animationDuration: 1000,
            showSymbol: false,
            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,29,113, 0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(255,29,113, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(255,29,113)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 282, 191, 134, 100]
        },]
    };
    myChart2.setOption(option2);

    $(window).resize(function () {
        myChart.resize()
        myChart2.resize()
    })
</script>
</body>

</html>
